<template>
	<view>
		<view @click="closePop" class="modal animated" :class="showMadal"></view>
		<view class="main" :class="show" :style="{borderRadius: `${radius} ${radius} 0 0`}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			radius: {
				type: String,
				default: '40rpx'
			}
		},
		data() {
			return {
				showMadal: 'fadeIn',
				show: 'hideAni'
			}
		},
		created() {
			
		},
		mounted() {
			setTimeout(() => {
				this.show = 'showAni'
			}, 50)
		},
		methods: {
			closePop() {
				this.showMadal = 'fadeOut'
				this.show = 'hideAni'
				
				setTimeout(() => {
					this.$emit('closepop')
				}, 300)
			}
		}
	}
</script>

<style scoped lang="scss">
	.animated {
		animation-duration: 0.3s;
	}

	.main {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		min-height: 100rpx;
		background-color: #fff;
		overflow: hidden;
		z-index: 9999;
		transition: all 0.3s;
	}

	.modal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba($color: #000000, $alpha: 0.25);
		z-index: 999;
	}

	.hideAni {
		transform: translateY(100%);
	}

	.showAni {
		transform: translateY(0);
	}
</style>
